<template>
  <view class="container">
    <uni-segmented-control
      class="uni_segmented_control"
      style="margin-top: -20rpx; background: #fff"
      :current="current"
      :values="items"
      style-type="text"
      active-color="#007aff"
      @clickItem="onClickItem"
    />

    <view class="pb20"></view>

    <!-- 未读 -->
    <view class="notiy">
      <uni-card spacing="0" is-full :border="false" v-for="(item, index) in list" :key="index">
        <template v-slot:title>
          <view class="slot-box">
            <uni-tag v-if="item.isRead == 0" text="未读" size="mini" type="error" />
            <uni-tag v-if="item.isRead == 2" text="已读" size="mini" type="default" />
            <text class="title">{{ item.name }}</text>
            <text class="extra">{{ item.createTime }}</text>
          </view>
        </template>
        <text class="content">{{ item.content }}</text>
        <view class="yidu" v-if="item.isRead == 0">
          <image src="../../static/notice/xiangmu/10.png" mode />
          <text @click="isReadFn(item.id, item.isRead)">标为已读</text>
        </view>
      </uni-card>
    </view>

    <view class="no-data" v-if="list.length === 0">
      <NoData style="height: 100%;" />
    </view>
  </view>
</template>
  
  <script setup>
import { websock } from "../../net/websock";
import { ref, reactive } from "vue";
import { getjixiaoList, setjixiao, getPeopleId } from "../../net/jixiaos";
import { onShow, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { apiProjectNoticeList, apiChangeNoticeStauts } from "../../net/xiangmu";
import NoData from "@/components/NoData.vue";

const current = ref(0);
const items = ref(["未读消息", "已读消息"]);
const list = ref([]);
// const userUid = uni.getStorageSync("userInfo").uid;

const total = ref(0);
const getList = async () => {
  const res = await getPeopleId();
  console.log(res);
  const userUid = res.data.id;
  const queryType = -1;
  const isRead = current.value === 0 ? 0 : 2;
  const params = { isRead, userUid, queryType };
  console.log(params);
  const { data } = await getjixiaoList(params);
  if (data.length > 0) {
    list.value = data;
  } else {
    list.value = [];
  }
  uni.stopPullDownRefresh();
};

onShow(() => {
  getList();
});

// 标记已读
const isReadFn = async Id => {
  //   uni.navigateTo({ url: `../jiXiao/keyanList?id=${Id}` });
  const params = {
    id: Id,
    isRead: 2
  };
  const res = await setjixiao(params);
  getList();
};

const onClickItem = e => {
  if (current.value !== e.currentIndex) {
    current.value = e.currentIndex;
    getList();
  }
};

// 下拉刷新，获取最新的数据
onPullDownRefresh(() => {
  getList();
});

// 上拉加载
// onReachBottom(() => {
//   console.log(params);
//   if (params.pageNum * params.pageSize >= total.value) {
//     uni.showToast({
//       title: "数据全部加载",
//       duration: 2000
//     });
//     return;
//   } else {
//     params.pageNum++;
//     getList();
//   }
// });
</script>
  
<style lang="scss">
@import "/static/common.scss";

image {
  width: 48rpx;
  height: 48rpx;
}

.overflow-2-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* 指定最大显示行数 */
  -webkit-line-clamp: 2;
  /* 省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
  /* 防止单词被截断 */
  word-break: break-all;
  white-space: normal;
}

.container {
  padding-top: 10px;
  background: #f9f9f9;
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;

  .uni_segmented_control {
    width: 100%;
    position: fixed;
    top: 10rpx;
    z-index: 100;
  }
}

.pb20 {
  padding-bottom: 20px;
}

.uni-card {
  width: 100% !important;
  border-radius: 4px;

  &:not(:last-child) {
    margin-bottom: 30rpx !important;
  }
}

.slot-box {
  padding: 7px 10px;

  .title {
    flex: 1;
    margin-left: 10rpx;
    font-size: 30rpx;
    font-weight: bold;
  }

  .extra {
    font-size: 26rpx;
    color: #999;
  }
}

.notiy {
  margin-top: 40rpx;
  width: 750rpx;
  padding: 0 25rpx;
  box-sizing: border-box;

  .uni-card {
    width: 700rpx;
    min-height: 300rpx;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 20rpx;
  }

  // 评论人
  .comment_people {
    height: 34rpx;
    font-size: 24rpx;
    line-height: 28rpx;
    color: #666666;
  }

  // 评论内容
  .comment_content {
    width: 614prx;
    margin: 10rpx 0;
    font-size: 30rpx;
    font-weight: 500;
    color: #333333;
  }

  .content {
    display: inline-block;
    width: 654rpx;
    min-height: 100rpx;
    font-size: 30rpx;
    color: #666666;
    padding: 10rpx;
    box-sizing: border-box;
    background: #f8fafb;
    border-radius: 8rpx;
  }

  .yidu {
    margin: 16rpx 0;
    width: 100%;
    height: 50rpx;
    color: #3b95ff;
    display: flex;
    align-items: center;
    justify-content: right;
  }
}
.no-data {
  position: absolute;
  left: 0;
  top: 140rpx;
  right: 0;
  bottom: 0;
  height: 100%;
}
</style>